<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-pie-chart"></i> schart图表
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">

            <div class="handle-box">
                <el-select v-model="queryData.agent" placeholder="终端">
                    <el-option key="1" label="全部" value=""></el-option>
                    <el-option key="2" label="移动端" value="mobile"></el-option>
                    <el-option key="3" label="PC端" value="pc"></el-option>
                    <el-option key="4" label="其他" value="other"></el-option>
                </el-select>

                <el-date-picker
                    v-model="queryData.start"
                    type="date"
                    value-format="timestamp"
                    placeholder="选择开始日期">
                </el-date-picker>
                <el-date-picker
                    v-model="queryData.end"
                    type="date"
                    value-format="timestamp"
                    placeholder="选择结束日期">
                </el-date-picker>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </div>


            <div class="schart-box">
                <div class="content-title">饼状图</div>
                <schart class="schart" canvasId="pie" :options="options3"></schart>
            </div>
        </div>
    </div>
</template>

<script>
import Schart from 'vue-schart';

export default {
    name: 'basecharts',
    components: {
        Schart
    },
    //数据部分
    data() {
        //设置查询的起始时间
        let d =new Date();
        d.setFullYear(2020);
        d.setMonth(0);
        d.setDate(1);
        return {
            queryData: {
                //初始值
                agent: '',
                start: d.getTime(),
                end: new Date().getTime()
            },
            options3: {
                /**
                 * type:表示图的类型 pie：饼图  ring：环形图  line :折线图  bar（默认):柱状图
                 */
                type: 'pie',
                title: {
                    //图的标题 ，还有相关配置查阅文档
                    text: '热点标题分布图'
                },
                //半径
                radius: 150,
                //图例相关配置
                legend: {
                    //位置
                    position: 'left'
                },
                //背景颜色
                bgColor: '#fbfbfb',
                //饼状每个扇形的分类或名称，用于图例文本
                labels: [],
                //数据集
                datasets: [
                    //数据
                    {
                        data: []
                    }
                ]
            }
        };
    },
    //生命周期钩子函数   当页面被创建即加载该方法
    created() {
        this.loadData();
    },
    //方法区
    methods: {
        //加载数据
        loadData() {
            this.$axios.post('/home/count',this.queryData).then((res) => {
                console.log(res);
                //处理res  把title装到labels   把count装到data
                let arrLabels = [];
                let arrCount = [];
                for (let i of res.data) {
                    arrLabels.push(i.title);//将每一个数组元素的title放进去
                    arrCount.push(i.count);//将每一个数组元素的count放进去
                }
                //给配置项里的labels赋值
                this.options3.labels = arrLabels;
                this.options3.datasets[0].data = arrCount;
            });
        },
        //更改query的值之后，重新查询一次
        handleSearch() {
            this.loadData();
        }
    }

};
</script>

<style scoped>
.schart-box {
    display: inline-block;
    margin: 20px;
}

.schart {
    width: 600px;
    height: 400px;
}

.content-title {
    clear: both;
    font-weight: 400;
    line-height: 50px;
    margin: 10px 0;
    font-size: 22px;
    color: #1f2f3d;
}
</style>